<template>
  <div>
    <el-card shadow="never" :body-style="{ padding: '10px' }" style="height: 100vh; overflow: auto">
      <!-- 卡片头部 -->
      <div slot="header">
        <el-divider direction="vertical"></el-divider>
        学员学号：<span class="head-font">{{ studentId }}</span>
        <el-divider direction="vertical"></el-divider>
        学员名称：<span class="head-font">{{ studentName }}</span>
      </div>
      <!-- 卡片信息 -->
      <div style="float: left; width: 100%">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table :data="props.row.videoInfos" style="width: 100%" border>
                <el-table-column prop="title" label="章节-小节名称"> </el-table-column>
                <el-table-column prop="beginTime" label="开始时间"> </el-table-column>
                <el-table-column prop="endTime" label="结束时间"> </el-table-column>
                <el-table-column prop="progress" label="学习进度(%)"> </el-table-column>
                <el-table-column prop="score" label="学习成绩"> </el-table-column>
                <el-table-column prop="learnTime" label="学习时长(分钟)"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="课程名称" prop="title"> </el-table-column>
          <el-table-column label="学习时长(分钟)" prop="learnTime"> </el-table-column>
          <el-table-column label="学习进度(%)" prop="progress"> </el-table-column>
          <el-table-column label="是否结束" prop="is_end"> </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getCourseRecordList } from "@/api/student";
export default {
  //视频记录列表
  name: "studentStudyRecord",
  data: function () {
    return {
      //表格加载遮罩
      listLoading: "false",
      //学员编号
      studentId: this.$route.query.id,
      //学员姓名
      studentName: this.$route.query.studentName,
      //记录总数
      totalNum: "",
      //记录列表
      recordList: [],
      tableData: [],
      courseId: "",
    };
  },
  created: function () {
    this.queryAllRecord();
  },
  methods: {
    //根据学员编号查找的学习记录列表
    queryAllRecord() {
      this.listLoading = true;
      getCourseRecordList(this.studentId).then((res) => {
        console.log(res);
        this.tableData = res.data.allCourseRecord;
        // 对tabelData进行遍历，并将每一个对象的progress属性进行乘以100
        this.tableData.forEach((item) => {
          item.progress = item.progress * 100;
          // 判断progress是否为100，如果为100，则将is_end赋值为"是",否则赋值为"否"
          if (item.progress == 100) {
            item.is_end = "已结束";
          } else {
            item.is_end = "未完成";
          }
          // 对每一个对象的videoInfos属性进行遍历，并将每一个对象的progress属性进行乘以100
          item.videoInfos.forEach((item) => {
            item.progress = item.progress * 100;
            // 对title属性进行判断，如果不为null则截取，去除最后的.mp4字段
            if (item.title != null)
              item.title = item.title.substring(0, item.title.length - 4);
            // 对beginTime和endTime进行判断，如果为null，则赋值为"未开始学习"
            if (item.beginTime == null) {
              item.beginTime = "未开始学习";
            }
            if (item.endTime == null) {
              item.endTime = "未开始学习";
            }
          });
        });
        console.log(this.tableData);
        this.listLoading = false;
      });
    },
    //返回
    goBack() {
      this.$router.push({
        name: "List",
      });
    },
  },
};
</script>
<style scoped>
.head-font {
  font-weight: bold;
}

.search {
  width: 30%;
}

.el-card {
  height: 100vh;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
